import { useState, useCallback } from 'react'
const { $Lazy } = window
const Button 		 = $Lazy.load(()=>import('@antd/button'))
const Select 		 = $Lazy.load(()=>import('@antd/form/select'))
const data = [
	{name: '20 条/页', value: 20}, {name: '50 条/页', value: 50}, {name: '100 条/页', value: 100}, {name: '150 条/页', value: 150},
	{name: '200 条/页', value: 200}, {name: '300 条/页', value: 300}, {name: '500 条/页', value: 500}
]
const Index = ({onChange}, ref) => {
	const [current, setCurrent] = useState(1)
	const [pageSize, setPageSize] = useState(20)
	const change = useCallback((current, pageSize) => {
		onChange(current, pageSize)
		setCurrent(current)
		setPageSize(pageSize)
	}, [onChange])
	return <div className='fx xj p10'>
		<div className='g9'>当前第 {current} 页</div>
		<div className='fxm'>
			<Button width='80px' className='mr20' label='首页' onClick={() => change(1, pageSize)} />
			<Button ghost width='80px' className='mr20' label='上一页' onClick={() => change(current - 1, pageSize)} disabled={current === 1} />
			<Button ghost width='80px' className='mr20' label='下一页' onClick={() => change(current + 1, pageSize)} />
			<Select isClear={false} noSearch value={pageSize} data={data} onChanged={({value}) => change(current, value)} />
		</div>
	</div>
}

export default Index